<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogType === 'create' ? '新增医院' : '编辑医院'"
    width="600px"
    :close-on-click-modal="false"
    @closed="handleClose"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="100px"
      label-position="right"
    >
      <el-form-item label="医院编码" prop="hospitalCode">
        <el-input v-model="formData.hospitalCode" placeholder="请输入医院编码" />
      </el-form-item>
      <el-form-item label="医院名称" prop="hospitalName">
        <el-input v-model="formData.hospitalName" placeholder="请输入医院名称" />
      </el-form-item>
      <el-form-item label="AppID" prop="appID">
        <el-input v-model="formData.appID" placeholder="请输入AppID" />
      </el-form-item>
      <el-form-item label="AppSecret" prop="appSecret">
        <el-input v-model="formData.appSecret" placeholder="请输入AppSecret" />
      </el-form-item>
      <el-form-item label="状态" prop="delFlag">
        <el-switch
          v-model="formData.delFlag"
          active-value="N"
          inactive-value="Y"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage,ElLoading } from 'element-plus'
// 导入 computed 函数
import { computed } from 'vue'
// 导入 API 函数
import { createHospital, updateHospital } from '@/api/hospital'

const props = defineProps({
  modelValue: Boolean,
  dialogType: {
    type: String,
    default: 'create'
  },
  currentData: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:modelValue', 'refresh'])

// 对话框显示控制


const dialogVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

// 表单引用
const formRef = ref<FormInstance>()

// 表单数据
const formData = reactive({
  id: '',
  hospitalCode: '',
  hospitalName: '',
  appID: '',
  appSecret: '',
  delFlag: 'N'
})

// 表单验证规则
const rules = reactive({
  hospitalCode: [
    { required: true, message: '请输入医院编码', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在3到20个字符', trigger: 'blur' }
  ],
  hospitalName: [
    { required: true, message: '请输入医院名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在2到50个字符', trigger: 'blur' }
  ]
})

// 监听当前数据变化
watch(() => props.currentData, (val) => {
  Object.assign(formData, val)
}, { deep: true, immediate: true })

// 提交表单
const handleSubmit = async () => {
  try {
    await formRef.value?.validate()
    
    const loading = ElLoading.service({
      lock: true,
      text: '提交中...',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    
    try {
      if (props.dialogType === 'create') {
        await createHospital(formData)
      } else {
        await updateHospital({...formData, id: parseInt(formData.id)})
      }
      
      ElMessage.success(props.dialogType === 'create' ? '新增成功' : '更新成功')
      emit('refresh')
      dialogVisible.value = false
    } finally {
      loading.close()
    }
  } catch (error) {
    if (error instanceof Error) {
      ElMessage.error(error.message || '操作失败')
    }
    console.error(error)
  }
}

// 关闭对话框
const handleClose = () => {
  formRef.value?.resetFields()
}
</script>
